<route lang="json5">
{
  path: '/contact',
  meta: {
    title: '联系我们',
    layout: 'pc-default',
  },
}
</route>

<template>
  <div class="contact-page">
    <!-- Banner Section -->
    <section class="page-banner">
      <div class="container-box">
        <h1 class="banner-title">联系我们</h1>
        <p class="banner-subtitle">我们随时准备为您提供专业服务</p>
      </div>
    </section>

    <!-- Contact Content -->
    <section class="contact-content">
      <div class="container-box">
        <div class="contact-layout">
          <!-- Contact Info -->
          <div class="contact-info">
            <h2 class="section-title">联系方式</h2>

            <div class="info-cards">
              <div class="info-card">
                <div class="info-icon">
                  <el-icon size="40"><Location /></el-icon>
                </div>
                <div class="info-content">
                  <h3 class="info-title">公司地址</h3>
                  <p class="info-text">
                    山东省滨州市北外环与渤海二十一路交叉口，<br />
                    向南100米路东。门口竖立有"培训基地"标牌。
                  </p>
                  <el-button type="text" @click="openMap">
                    <el-icon><Position /></el-icon>
                    查看地图
                  </el-button>
                </div>
              </div>

              <div class="info-card">
                <div class="info-icon">
                  <el-icon size="40"><Phone /></el-icon>
                </div>
                <div class="info-content">
                  <h3 class="info-title">联系电话</h3>
                  <p class="info-text">
                    <a href="tel:18954338600">18954338600（曹老师）</a><br />
                    工作时间：周一至周五 8:00-18:00
                  </p>
                  <el-button type="text" @click="makeCall">
                    <el-icon><Phone /></el-icon>
                    立即拨打
                  </el-button>
                </div>
              </div>

              <div class="info-card">
                <div class="info-icon">
                  <el-icon size="40"><Message /></el-icon>
                </div>
                <div class="info-content">
                  <h3 class="info-title">电子邮箱</h3>
                  <p class="info-text">
                    <a href="mailto:binjianjifu@163.com">binjianjifu@163.com</a><br />
                    我们将在24小时内回复您的邮件
                  </p>
                  <el-button type="text" @click="sendEmail">
                    <el-icon><Message /></el-icon>
                    发送邮件
                  </el-button>
                </div>
              </div>

              <div class="info-card">
                <div class="info-icon">
                  <el-icon size="40"><Clock /></el-icon>
                </div>
                <div class="info-content">
                  <h3 class="info-title">营业时间</h3>
                  <div class="business-hours">
                    <div class="hours-row">
                      <span class="day">周一 - 周五</span>
                      <span class="time">8:00 - 18:00</span>
                    </div>
                    <div class="hours-row">
                      <span class="day">周六</span>
                      <span class="time">9:00 - 17:00</span>
                    </div>
                    <div class="hours-row">
                      <span class="day">周日</span>
                      <span class="time">休息</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Quick Contact Methods -->
            <div class="quick-contact">
              <h3 class="quick-title">快速联系</h3>
              <div class="quick-buttons">
                <el-button type="primary" size="large" @click="makeCall" class="quick-btn">
                  <el-icon><Phone /></el-icon>
                  电话咨询
                </el-button>

                <el-button size="large" @click="showWechat = true" class="quick-btn">
                  <el-icon><ChatDotRound /></el-icon>
                  微信咨询
                </el-button>

                <el-button size="large" @click="sendEmail" class="quick-btn">
                  <el-icon><Message /></el-icon>
                  邮件咨询
                </el-button>
              </div>
            </div>
          </div>

          <!-- Contact Form -->
          <div class="contact-form">
            <h2 class="section-title">在线留言</h2>
            <p class="form-description"> 请填写以下信息，我们会尽快与您联系 </p>

            <el-form
              ref="contactFormRef"
              :model="contactForm"
              :rules="formRules"
              label-width="100px"
              label-position="left"
              class="contact-form-content"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name" required>
                    <el-input
                      v-model="contactForm.name"
                      placeholder="请输入您的姓名"
                      size="large"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="联系电话" prop="phone" required>
                    <el-input
                      v-model="contactForm.phone"
                      placeholder="请输入您的手机号码"
                      size="large"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                    <el-input
                      v-model="contactForm.email"
                      placeholder="请输入您的邮箱地址"
                      size="large"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="公司名称" prop="company">
                    <el-input
                      v-model="contactForm.company"
                      placeholder="请输入您的公司名称"
                      size="large"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="咨询服务" prop="service">
                <el-select
                  v-model="contactForm.service"
                  placeholder="请选择您想咨询的服务"
                  size="large"
                  style="width: 100%"
                >
                  <el-option label="工程咨询" value="consulting" />
                  <el-option label="技能培训" value="training" />
                  <el-option label="资格认证" value="certification" />
                  <el-option label="质量检测" value="quality" />
                  <el-option label="其他服务" value="other" />
                </el-select>
              </el-form-item>

              <el-form-item label="留言内容" prop="message" required>
                <el-input
                  v-model="contactForm.message"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述您的需求或问题..."
                  size="large"
                />
              </el-form-item>

              <el-form-item>
                <div class="form-actions">
                  <el-button
                    type="primary"
                    size="large"
                    :loading="submitLoading"
                    @click="submitForm"
                    class="submit-btn"
                  >
                    提交留言
                  </el-button>

                  <el-button size="large" @click="resetForm" class="reset-btn">
                    重置表单
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <!-- Map Section -->
    <section class="map-section">
      <div class="container-box">
        <h2 class="section-title text-center">公司位置</h2>
        <div class="map-container">
          <div class="map-placeholder">
            <el-icon size="80" class="map-icon"><Location /></el-icon>
            <p class="map-text">
              山东省滨州市北外环与渤海二十一路交叉口<br />
              向南100米路东，门口竖立有"培训基地"标牌
            </p>
            <el-button type="primary" @click="openMap"> 查看详细地图 </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq-section">
      <div class="container-box">
        <h2 class="section-title text-center">常见问题</h2>
        <div class="faq-content">
          <el-collapse v-model="activeFaq" accordion>
            <el-collapse-item
              v-for="faq in faqs"
              :key="faq.id"
              :title="faq.question"
              :name="faq.id"
              class="faq-item"
            >
              <!-- eslint-disable-next-line vue/no-v-html -->
              <div class="faq-answer" v-html="faq.answer"></div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </section>

    <!-- WeChat Modal -->
    <el-dialog v-model="showWechat" title="微信咨询" width="400px" class="wechat-dialog">
      <div class="wechat-content">
        <div class="qr-container">
          <el-image
            src="/src/assets/images/wechat-qr.png"
            alt="微信二维码"
            class="qr-image"
            fit="contain"
          />
        </div>
        <p class="qr-text">
          扫描二维码添加微信<br />
          或搜索微信号：<strong>BinJianJiFu</strong>
        </p>
        <div class="contact-tips">
          <el-icon><InfoFilled /></el-icon>
          <span>工作时间内会及时回复，其他时间请留言</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus';
  import {
    Location,
    Phone,
    Message,
    Clock,
    Position,
    ChatDotRound,
    InfoFilled,
  } from '@element-plus/icons-vue';

  // 表单引用
  const contactFormRef = ref();
  const submitLoading = ref(false);
  const showWechat = ref(false);
  const activeFaq = ref('1');

  // 联系表单数据
  const contactForm = reactive({
    name: '',
    phone: '',
    email: '',
    company: '',
    service: '',
    message: '',
  });

  // 表单验证规则
  const formRules = {
    name: [
      { required: true, message: '请输入您的姓名', trigger: 'blur' },
      { min: 2, max: 20, message: '姓名长度应为2-20个字符', trigger: 'blur' },
    ],
    phone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
    email: [
      {
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ],
    message: [
      { required: true, message: '请输入留言内容', trigger: 'blur' },
      { min: 10, max: 500, message: '留言内容应为10-500个字符', trigger: 'blur' },
    ],
  };

  // FAQ数据
  const faqs = [
    {
      id: '1',
      question: '如何联系咨询服务？',
      answer:
        '您可以通过电话、邮箱或在线留言的方式联系我们。我们的客服人员会在工作时间内及时回复您的咨询。电话：18954338600（曹老师），邮箱：binjianjifu@163.com。',
    },
    {
      id: '2',
      question: '培训课程如何报名？',
      answer:
        '培训报名流程：<br>1. 联系我们了解课程详情和时间安排<br>2. 填写报名表并提交相关资料<br>3. 缴纳培训费用<br>4. 参加培训课程<br>5. 考试合格后颁发证书',
    },
    {
      id: '3',
      question: '证书办理需要多长时间？',
      answer:
        '证书办理周期因证书类型而异：<br>• 建筑工人岗位证书：15-30个工作日<br>• 特种作业证：20-45个工作日<br>• 技能等级证书：25-40个工作日<br>具体时间以相关部门审批进度为准。',
    },
    {
      id: '4',
      question: '服务收费标准是什么？',
      answer:
        '我们的收费标准根据服务类型、项目复杂程度和服务周期等因素确定。建议您直接联系我们获取详细的报价信息。我们会根据您的具体需求提供合理的价格方案。',
    },
    {
      id: '5',
      question: '公司在哪里？如何到达？',
      answer:
        '公司地址：山东省滨州市北外环与渤海二十一路交叉口，向南100米路东。门口竖立有"培训基地"标牌。<br>交通方式：<br>• 公交：乘坐XX路公交车到XX站下车<br>• 自驾：导航搜索"山东滨建工程技术服务有限公司"<br>• 打车：直接报地址即可',
    },
  ];

  // 方法
  const makeCall = () => {
    window.open('tel:18954338600');
  };

  const sendEmail = () => {
    window.open('mailto:binjianjifu@163.com');
  };

  const openMap = () => {
    // 这里可以集成地图API，比如百度地图、高德地图等
    ElMessage.info('正在打开地图...');
    // 示例：打开百度地图
    window.open('https://map.baidu.com/search/山东省滨州市北外环与渤海二十一路交叉口');
  };

  const submitForm = async () => {
    try {
      const valid = await contactFormRef.value.validate();
      if (!valid) return;

      submitLoading.value = true;

      // 模拟API调用
      await new Promise((resolve) => setTimeout(resolve, 2000));

      ElMessage.success('留言提交成功！我们会尽快与您联系。');
      resetForm();
    } catch (error) {
      ElMessage.error('提交失败，请稍后重试');
    } finally {
      submitLoading.value = false;
    }
  };

  const resetForm = () => {
    contactFormRef.value?.resetFields();
    Object.keys(contactForm).forEach((key) => {
      contactForm[key] = '';
    });
  };
</script>

<style lang="scss" scoped>
  .contact-page {
    min-height: 100vh;
  }

  // Page Banner
  .page-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;

    .banner-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .banner-subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
    }
  }

  // Contact Content
  .contact-content {
    padding: 100px 0;

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;

      @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
  }

  // Contact Info
  .contact-info {
    .info-cards {
      display: grid;
      gap: 24px;
      margin-bottom: 40px;
    }

    .info-card {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      background: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      }

      .info-icon {
        color: var(--el-color-primary);
        padding: 12px;
        background: var(--el-color-primary-light-9);
        border-radius: 12px;
        flex-shrink: 0;
      }

      .info-content {
        flex: 1;

        .info-title {
          font-size: 1.3rem;
          color: #2c3e50;
          margin-bottom: 12px;
        }

        .info-text {
          color: #666;
          line-height: 1.6;
          margin-bottom: 12px;

          a {
            color: var(--el-color-primary);
            text-decoration: none;
            font-weight: 500;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .business-hours {
          .hours-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;

            &:last-child {
              border-bottom: none;
            }

            .day {
              color: #666;
              font-weight: 500;
            }

            .time {
              color: #2c3e50;
              font-weight: 600;
            }
          }
        }

        .el-button {
          margin-top: 8px;

          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }

    // Quick Contact
    .quick-contact {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      padding: 30px;
      border-radius: 16px;
      text-align: center;

      .quick-title {
        color: white;
        font-size: 1.3rem;
        margin-bottom: 20px;
      }

      .quick-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;

        @media (max-width: 768px) {
          flex-direction: column;
        }

        .quick-btn {
          height: 44px;
          padding: 0 24px;

          .el-icon {
            margin-right: 6px;
          }
        }
      }
    }
  }

  // Contact Form
  .contact-form {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .form-description {
      color: #666;
      margin-bottom: 30px;
    }

    .contact-form-content {
      .el-form-item {
        margin-bottom: 24px;
      }

      .form-actions {
        display: flex;
        gap: 16px;
        justify-content: center;

        @media (max-width: 768px) {
          flex-direction: column;
        }

        .submit-btn,
        .reset-btn {
          min-width: 120px;
          height: 44px;
        }
      }
    }
  }

  // Map Section
  .map-section {
    padding: 80px 0;
    background: #f8f9fa;

    .map-container {
      margin-top: 40px;
      height: 400px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

      .map-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: white;
        text-align: center;

        .map-icon {
          color: var(--el-color-primary);
          margin-bottom: 20px;
        }

        .map-text {
          color: #666;
          line-height: 1.6;
          margin-bottom: 30px;
          font-size: 1.1rem;
        }
      }
    }
  }

  // FAQ Section
  .faq-section {
    padding: 100px 0;

    .faq-content {
      max-width: 800px;
      margin: 40px auto 0;

      .faq-item {
        margin-bottom: 16px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;

        &:hover {
          border-color: var(--el-color-primary);
        }

        :deep(.el-collapse-item__header) {
          padding: 20px 24px;
          font-size: 1.1rem;
          font-weight: 500;
          background: white;

          &:hover {
            color: var(--el-color-primary);
          }
        }

        :deep(.el-collapse-item__content) {
          padding: 0 24px 20px;
        }

        .faq-answer {
          color: #666;
          line-height: 1.8;

          :deep(br) {
            margin-bottom: 8px;
          }
        }
      }
    }
  }

  // WeChat Dialog
  .wechat-dialog {
    .wechat-content {
      text-align: center;

      .qr-container {
        margin-bottom: 20px;

        .qr-image {
          width: 200px;
          height: 200px;
          border: 1px solid #e9ecef;
          border-radius: 8px;
        }
      }

      .qr-text {
        color: #666;
        line-height: 1.6;
        margin-bottom: 20px;

        strong {
          color: var(--el-color-primary);
          font-weight: 600;
        }
      }

      .contact-tips {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #999;
        font-size: 14px;

        .el-icon {
          color: var(--el-color-warning);
        }
      }
    }
  }

  // Common styles
  .section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;

    &.text-center {
      text-align: center;
    }
  }
</style>
